<template>
  <div class="w-wrap-inner">
    <div class="bt">{{isEdit?'编辑商品信息':'登记新商品'}}</div>
    <el-form
      :rules="rules"
      :model="spRecord"
      ref="ruleForm"
      size="small"
      label-width="95px"
      style="border:0px solid;"
    >
      <el-row>
        <!--1-->
        <el-col :span="6">
          <el-form-item label="商品编号：">
            <el-input v-model="id_str" :disabled="true" style="width:98%;" placeholder="自动"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品类型：" prop="type">
            <el-input v-model="type_str" :disabled="true" placeholder="赠品"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品状态：">
            <!-- <el-input v-model="state_str" :disabled="true" style="width:95%;" placeholder="草稿"></el-input> -->
            <el-switch
              v-if="spRecord.state==3"
              disabled
              class="switchStyle"
              v-model="spRecord.state"
              :width="60"
              active-color="#7958b5"
              active-text="上架"
              inactive-color="#e8e4f3"
              inactive-text="草稿"
              :active-value="1"
              :inactive-value="3"
            ></el-switch>
            <el-switch
              v-else
              disabled
              class="switchStyle"
              v-model="spRecord.state"
              :width="60"
              active-color="#7958b5"
              active-text="上架"
              inactive-color="#e8e4f3"
              inactive-text="下架"
              :active-value="1"
              :inactive-value="2"
            ></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="市场价格：" prop="price_market">
            <el-input
              v-model="spRecord.price_market"
              type="number"
              style="text-align: right;"
              placeholder="自动"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!--2-->
        <el-col :span="18">
          <el-form-item label="商品名称：" prop="name">
            <el-input v-model="spRecord.name" style="width:99%;" placeholder="自动" ref="spname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="销售价格：" prop="price_sell">
            <el-input
              v-model="spRecord.price_sell"
              type="number"
              style="text-align:right;"
              placeholder="自动"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!--3-->
        <el-col :span="18">
          <el-form-item label="比价链接：">
            <el-input v-model="spRecord.link_url" style="width:99%;" placeholder="自动"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品裸价：" prop="price_net">
            <el-input
              v-model="spRecord.price_net"
              type="number"
              style="text-align:right;"
              placeholder="请输入"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!--4-->
        <el-col :span="9">
          <el-form-item label="商品商家：" prop="merchant_id">
            <select-Merchant v-model="spRecord.merchant_id"></select-Merchant>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="商品种类：" prop="kind_id">
            <cascaderProductKind v-model="spRecord.kind_id"></cascaderProductKind>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品运费：" prop="price_post">
            <el-input
              v-model="spRecord.price_post"
              type="number"
              style="text-align:right;"
              placeholder="请输入"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!--5-->
        <el-col :span="5">
          <el-form-item label="商品库存：" prop="stock">
            <el-input
              v-model="spRecord.stock"
              type="number"
              style="text-align:right;"
              :disabled="isFlowMoreAttr && dcType==1"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-checkbox
            v-model="isFlowMoreAttr"
            :disabled="true"
            style="margin:5px 0 0 5px;"
            @change="onMoreAttrClick"
          >随多属性自动调整</el-checkbox>
        </el-col>
        <el-col :span="5">
          <el-form-item label="月限购量：" prop="limit_month_num">
            <el-input
              v-model="spRecord.limit_month_num"
              type="number"
              style="text-align:right;"
              placeholder="自动"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="虚拟销量：" prop="sell_base">
            <el-input
              v-model="spRecord.sell_base"
              type="number"
              style="width:96%;text-align:right;"
              placeholder="赠品"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品税费：" prop="price_tax">
            <el-input
              v-model="spRecord.price_tax"
              type="number"
              style="text-align:right;"
              placeholder="自动"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!--6-->
        <el-col :span="3">
          <el-form-item label-width="15">
            <el-checkbox v-model="spRecord.is_activity">活动商品</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="15">
            <el-checkbox v-model="spRecord.is_recommend">推荐商品</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="15">
            <el-checkbox v-model="spRecord.is_top">商品置顶</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="15">
            <el-checkbox v-model="spRecord.is_must_buy">必购商品</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="抵扣积分：">
            <el-input
              v-model="spRecord.coin_deduct"
              :disabled="!isMkt"
              type="number"
              style="width:97%;"
              placeholder="自动"
            >
              <template slot="append">积分</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="成本价格：" prop="price_cost">
            <el-input
              :disabled="true"
              v-model="spRecord.price_cost"
              type="number"
              style="text-align:right;"
              placeholder="自动"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-bottom:15px;">
      <el-col :span="24" style="text-align:center;">
        <el-button
          size="small"
          type="primary"
          :loading="isSaving"
          style="width:100px;"
          @click="onAddSp('ruleForm')"
        >{{isNewAdd?'添加':'保存基本信息'}}</el-button>
        <router-link target="_blank" :to="{name:'previewproduct', query: {id:spRecord.id}}">
          <el-button
            size="small"
            type="primary"
            :disabled="spId==0"
            :loading="isSaving"
            style="width:100px;"
          >预览</el-button>
        </router-link>
        <el-button
          size="small"
          :loading="isSaving"
          type="primary"
          style="width:100px;"
          :disabled="!(isSaveBasicdata && isSavePicture)"
          @click="onPublishSp"
        >{{spRecord.state==3?'发布商品':(spRecord.state==1?'下架':'上架')}}</el-button>
      <el-button
          size="small"
          :loading="isSaving"
          type="primary"
          style="width:100px;"
          @click="onCloseWindown"
        >关闭</el-button>
      </el-col>
    </el-row>
    <span v-if="!isNewAdd">
      <el-container>
        <el-aside width="350px" class="ovf">
          <div class="title">
            <div class="basetxt">商品展示图片</div>
            <div class="basebtn">
              <el-button
                size="mini"
                type="primary"
                plain
                round
                :disabled="pictures.length==0"
                @click="onPicUpdate"
              >编辑</el-button>
              <el-button size="mini" type="primary" plain round @click="onPicUpload">上传</el-button>
            </div>
          </div>
          <logo-pic-show :pics="pictures"></logo-pic-show>
        </el-aside>
        <el-main>
          <attribute
            :sp-id="spRecord.id"
            :pics="picSelect"
            :attribute="spAttribute"
            :params="spParamInfo"
            :refresh="isRefresh"
            @refresh="onAttrParamRefresh"
            @stock-change="onTotalStockChange"
            @dc-type="onDcType"
          ></attribute>
        </el-main>
      </el-container>
      <br />
      <div class="title">
        <div class="basetxt">商品图文介绍</div>
        <div class="basebtn">
          <el-button size="mini" type="primary" plain round @click="onHtmlRefresh">刷新</el-button>
          <el-button size="mini" type="primary" plain round @click="onHtmlSave">保存</el-button>
        </div>
      </div>
      <div class="jswidth">
        <html-edit
          :value="html"
          action="UploadSpHtmlMap"
          :data="{sp_id:spRecord.id}"
          @textareaData="onHtmlChange"
        ></html-edit>
      </div>
    </span>
    <dlg-pic-upload ref="dlgpicupload" @success="onUploadSuccess"></dlg-pic-upload>
    <dlg-sort-pic ref="sortpic" @change="onLogoChange"></dlg-sort-pic>
  </div>
</template>

<script>
import logoPicShow from "@/components/picture/logoPicsShow"; //src\components\picture\logoPicsShow.vue
import dlgPicUpload from "./dlg_upload"; //上传图片
import dlgSortPic from "./dlg_update"; //排序图片
import htmlEdit from "@/components/HtmlEditor/editor";
import attribute from "./comp_attribute";
import selectMerchant from "@/components/basicdata/select_merchant"; //src\components\basicdata\select_merchant.vue
import cascaderProductKind from "@/components/basicdata/cascader_product_kind"; //src\components\basicdata\cascader_product_kind.vue

import {
  addSpRecord, //url: '/product/AddSpRecord'  - 添加新商品
  getProductEditInfo, //url: '/product/GetProductEditInfo' - 获取商品编辑信息:基本信息+图标列表
  getProductAttrParamList, ////url: '/product/GetProductAttrParamList' - 获取商品属性参数母板及列表
  getProductShowPicList, //url: '/product/GetProductShowPicList - 单独获取商品展示图片列表
  saveProductParamList, //url: '/product/SaveProductParamList - 保存商品属性信息
  saveProductHtml, //url: '/product/SaveProductHtml - 保存商品富文本
  getProductLogoSelectList, //url: '/product/GetProductLogoSelectList - 获取商品图标选择列表
  getProductHtml, //url: '/product/GetProductHtml - 获取商品介绍即富文件内容
  setProductState //url: '/product/SetProductState - 发布商品(上架)
} from "@/api/product";

export default {
  props: {
    spId: { type: Number, default: 0 }, //商品ID
    isMkt: { type: Boolean, default: false } //是否为超市商品
  },
  components: {
    logoPicShow,
    dlgPicUpload,
    dlgSortPic,
    htmlEdit,
    attribute, //多属性
    selectMerchant, //商家列表
    cascaderProductKind
  },
  data() {
    let isMarket = (rule, value, callback) => {
      let numbers = /^[0-9]{1,16}(.[0-9]{0,2})?$/;
      if (!numbers.test(value)) {
        callback(new Error("请输入一个正数，可带两位小数"));
      }
      if (value > 0) {
        callback();
      } else {
        callback(new Error("需大于0"));
      }
    };
    let isSell = (rule, value, callback) => {
      let numbers = /^[0-9]{1,16}(.[0-9]{0,2})?$/;
      if (!numbers.test(value)) {
        callback(new Error("请输入一个正数，可带两位小数"));
      }
      if (value > 0) {
        callback();
      } else {
        callback(new Error("需大于0"));
      }
    };
    let isCost = (rule, value, callback) => {
      let numbers = /^[0-9]{1,16}(.[0-9]{0,2})?$/;
      if (!numbers.test(value)) {
        callback(new Error("请输入一个正数，可带两位小数"));
      }
      if (value > 0) {
        callback();
      } else {
        callback(new Error("需大于0"));
      }
    };
    let isNet = (rule, value, callback) => {
      let numbers = /^[0-9]{1,16}(.[0-9]{0,2})?$/;
      if (!numbers.test(value)) {
        callback(new Error("请输入一个正数，可带两位小数"));
      }
      if (value > 0) {
        callback();
      } else {
        callback(new Error("需大于0"));
      }
    };
    let isNumber = (rule, value, callback) => {
      let numbers = /^[0-9]{1,16}(.[0-9]{0,2})?$/;
      if (!numbers.test(value)) {
        callback(new Error("请输入一个正数，可带两位小数"));
      }
      if (value >= 0) {
        callback();
      } else {
        callback(new Error("需为正数"));
      }
    };
    let isZNumber = (rule, value, callback) => {
      let numbers = /^[0-9]{1,16}$/;
      if (!numbers.test(value)) {
        callback(new Error("请输入一个正整数"));
      }
      if (value >= 0) {
        callback();
      } else {
        callback(new Error("需为正整数"));
      }
    };
    let isSelectMerchant = (rule, value, callback) => {
      if (value > 0) {
        callback();
      } else {
        callback(new Error("请选择一个商家"));
      }
    };
    let isSelectKind = (rule, value, callback) => {
      if (value > 0) {
        callback();
      } else {
        callback(new Error("请选择一个商品种类"));
      }
    };
    return {
      isSaveBasicdata: false, //基本数据保存过了
      isSavePicture: false, //图标上传过了
      // isSaveAttribute:false,//属性保存过了

      isEdit: false, //为编辑模式
      isNewAdd: true,
      addTxt: "添加",
      isSaving: false, //基本信息正在保存中
      isAttributing: false, //属性参数正在保存中
      isRefresh: false, //交替-用于传参数给【属性组件】

      //属性
      dcType: 0, //当前选中的属性类型：0-无  1-多属性
      oldSpAttribute: {}, //用于保存修改前的值，切换个数时用这个
      spAttribute: {
        type: 0, //属性类型：//0-无  1-单属性 2-双属性
        attr: [], //传给子组件的【属性名及其值】数组
        list: []
      },

      //方便显示的部分记录值
      state_str: "草稿", //对应spRecord.state - 3
      type_str: this.$props.isMkt ? "超市" : "赠品", //对应spRecord.type - 1
      id_str: "", //对应spRecord.id - 0为新增商品

      //总库存随多属性自动调整
      isFlowMoreAttr: true,
      oldTotalStock: 0, //随多属性调整前的总库存

      //用于创建新记录的基本信息
      spRecord: {
        id: 0, //序号：从11110001起
        state: 3, //状态：0删除 1上架 2下架 3草稿
        merchant_id: 0, //商家ID：来自商家表
        type: this.$props.isMkt ? 2 : 1, //商品类型：1赠品、2超市、0未知
        kind_id: 0, //商品种类：来自商品种类表
        name: "", //商品名称
        link_url: "", //比价链接
        is_activity: false, //活动商品
        is_recommend: false, //推荐商品
        is_top: false, //置顶
        is_must_buy: false, //必购
        limit_month_num: 0, //月限购
        sell_base: 0, //虚拟销量

        param_id: 0, //参数记录ID
        price_market: 0, //市场价
        price_sell: 0, //销售价
        price_net: 0, //裸价
        price_tax: 0, //税费
        price_post: 0, //运费
        price_cost: 0, //成本价
        coin_deduct: 0, //抵扣币值(积分)
        stock: 0, //库存
        default_logo_id: 0 //默认图标
      },

      spParamInfo: {}, //商品属性参数母板

      html: "", //富文本内容
      pictures: [], //展示图片 {logo: "",pic: "",maxpic: ""}
      picSelect: [], //图片选择列表{id:图片ID,url:"50x50的图片网址"}
      rules: {
        name: [
          { required: true, message: "不能为空", trigger: "blur" }
          // {
          //   type: "string",
          //   min: 11,
          //   message: "手机号不允许小于11位",
          //   trigger: "blur"
          // },
          // { validator: isPhone, trigger: "blur" }
        ],
        type: [{ required: true, message: "不能为空", trigger: "blur" }],
        merchant_id: [
          { required: true, message: "不能为空", trigger: "change" },
          { validator: isSelectMerchant, trigger: "blur" }
        ],
        kind_id: [
          { required: true, message: "不能为空", trigger: "blur" },
          { validator: isSelectKind, trigger: "blur" }
        ],
        price_market: [
          { required: true, message: "不能为空", trigger: "blur" },
          { validator: isMarket, trigger: "blur" }
        ],
        price_sell: [
          { required: true, message: "不能为空", trigger: "blur" },
          { validator: isSell, trigger: "blur" }
        ],
        price_cost: [
          { required: true, message: "不能为空", trigger: "blur" },
          { validator: isCost, trigger: "blur" }
        ],
        price_net: [
          { required: true, message: "不能为空", trigger: "blur" },
          { validator: isNet, trigger: "blur" }
        ],
        price_post: [{ validator: isNumber, trigger: "blur" }],
        price_tax: [{ validator: isNumber, trigger: "blur" }],
        stock: [{ validator: isZNumber, trigger: "blur" }],
        limit_month_num: [{ validator: isZNumber, trigger: "blur" }],
        sell_base: [{ validator: isZNumber, trigger: "blur" }]
      }
    };
  },
  watch: {
    spId: function(nval) {
      this.spRecord.id = nval;
    },
    dcType: function(radio) {
      if (radio == 1) {
        //多属性时固定为由子产品决定总库存
        this.isFlowMoreAttr = true;
      }
      // this.spAttribute = JSON.parse(JSON.stringify(this.oldSpAttribute));
    },
    "spRecord.price_market": function(nval) {
      this.spRecord.price_market = parseFloat(nval);
    },
    "spRecord.price_sell": function(nval) {
      this.spRecord.price_sell = parseFloat(nval);
    },
    //成本价=裸价+运费+税费
    "spRecord.price_net": function(nval) {
      this.spRecord.price_net = parseFloat(nval);
      this.GetCost();
    },
    "spRecord.price_tax": function(nval) {
      this.spRecord.price_tax = parseFloat(nval);
      this.GetCost();
    },
    "spRecord.price_post": function(nval) {
      this.spRecord.price_post = parseFloat(nval);
      this.GetCost();
    },
    //------
    "spRecord.stock": function(nval) {
      this.spRecord.stock = parseInt(nval);
    },
    "spRecord.limit_month_num": function(nval) {
      this.spRecord.limit_month_num = parseInt(nval);
    },
    "spRecord.sell_base": function(nval) {
      this.spRecord.sell_base = parseInt(nval);
    }
  },
  created() {
    document.body.className = "white";
    this.spRecord.id = this.$props.spId;
    let spId = this.$props.spId;
    if (spId > 0) {
      //为编辑模式
      this._GetAttrParam();
      getProductEditInfo({ id: this.$props.spId }).then(r => {
        if (r.code == 0) {
          this.spRecord = r.data.sp_head; //商品基本信息
          this.spBaseInfo = r.data.sp_base_info; //商品参数信息(子商品)
          this.html = r.data.sp_html; //富文本内容
          this.picSelect = r.data.sp_logo_list; //图标列表-用于图片选择
          this.httpHead = r.data.http_head; //网址头

          this._SetPics(r.data.sp_showpic_list); //展示图片
          this._SetSpParam(); //准备商品属性参数母板

          (this.isSaveBasicdata = true), //编辑，说明基本信息已经保存过了
            (this.isSavePicture = r.data.sp_showpic_list.length > 0); //代表保存过，已经有图片了

          this.id_str = this.spRecord.id;
          this.type_str =
            this.spRecord.type == 1
              ? "赠品"
              : this.spRecord.type == 2
              ? "超市"
              : "未知";
          let state = this.spRecord.state;
          //状态：0删除 1上架 2下架 3草稿
          if (state == 0) {
            this.state_str = "删除";
          } else if (state == 1) {
            this.state_str = "上架";
          } else if (state == 1) {
            this.state_str = "下架";
          } else if (state == 1) {
            this.state_str = "草稿";
          }
        } else {
          this.$message.error("获取商品编辑信息出错！原因：" + r.msg);
        }
        setTimeout(() => {
          this.$refs["spname"].focus();
        }, 150);
      });
      this.isEdit = true;
      this.isNewAdd = false;
    }
  },
  methods: {
    //关闭当前页面
    onCloseWindown() {
      window.opener = null;
      // window.open('','_self');
      window.close();
    },
    //计算成本价
    GetCost() {
      let pr = this.spRecord;
      pr.price_cost = pr.price_net + pr.price_post + pr.price_tax;
    },
    //获取商品属性参数
    _GetAttrParam(refresh) {
      getProductAttrParamList({ id: this.spRecord.id }).then(r => {
        if (r.code == 0) {
          // console.log(r);
          this.spAttribute.type = r.data.SpAttrParams.type; //属性类型（个数）
          this.spAttribute.attr = r.data.SpAttrParams.attr; //属性名及其值
          this.spAttribute.list = r.data.param_list; //商品属性参数列表(由此形成的子商品列表)
          this.dcType = this.spAttribute.type > 0 ? 1 : 0;
          this.oldSpAttribute = JSON.parse(JSON.stringify(this.spAttribute)); //保存，用于个数切换时恢复
          if (refresh == "refresh") {
            this.isRefresh = !this.isRefresh;
            this.$message.success("商品属性刷新成功！");
          }
        } else {
          this.$message.error("获取商品属性出错！原因：" + r.msg);
        }
      });
    },
    //商品属性刷新
    onAttrParamRefresh() {
      this._GetAttrParam("refresh");
    },

    //新增商品 或 保存修改后的商品基本数据
    onAddSp(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let resStr = this.isNewAdd ? "新增商品" : "保存商品基本信息";
          this.$confirm("此操作将" + resStr + ", 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this._SaveAddProduct(formName);
            })
            .catch();
        }
      });
    },
    _SaveAddProduct(formName) {
      this.isSaving = true;
      addSpRecord(this.spRecord).then(r => {
        let resStr = this.isNewAdd ? "新增商品" : "保存商品基本信息";
        if (r.code == 0) {
          this.spRecord.id = r.data.id; //ProductData.ProductDataID
          this.id_str = r.data.id;
          this.spRecord.param_id = r.data.param_id; //ProductParam.ProductParamID
          this._SetSpParam(); //准备商品属性参数母板
          this.$message.success(resStr + "成功！");
          this.isNewAdd = false;
          this.isSaveBasicdata = true;
        } else {
          this.$message.error(resStr + "出错！原因：" + r.msg);
        }
        this.isSaving = false;
      });
    },

    onMoreAttrClick(val) {
      this.spRecord.stock = this.oldTotalStock;
    },
    //准备商品属性参数母板
    _SetSpParam() {
      this.oldTotalStock = this.spRecord.stock;
      this.spParamInfo = {
        product_id: this.spRecord.id,
        price_market: this.spRecord.price_market, //市场价
        price_sell: this.spRecord.price_sell, //销售价
        price_net: this.spRecord.price_net, //裸价
        price_tax: this.spRecord.price_tax, //税费
        price_post: this.spRecord.price_post, //运费
        price_cost: this.spRecord.price_cost, //成本价
        coin_deduct: this.spRecord.coin_deduct, //抵扣币值(积分)
        stock: this.spRecord.stock, //库存
        default_logo_id: this.spRecord.default_logo_id //默认图标文件ID
      };
    },

    onPublishSp() {
      let st = this.spRecord.state;
      let msg = "";
      if (st == 3) {
        st = 1; //草稿->发布(上架)
        msg = "发布";
      } else if (st == 2) {
        st = 1; //下架->上架
        msg = "上架";
      } else {
        st = 2; //上架->下架
        msg = "下架";
      }
      setProductState({ sp_id: this.spRecord.id, state: st }).then(r => {
        if (r.code == 0) {
          this.$message.success(`商品${msg}成功！`);
          this.spRecord.state = st;
        } else {
          this.$message.success(`商品${msg}失败！原因：${r.msg}`);
        }
      });
    },

    //总库存随多属性发生了变化
    onTotalStockChange(totalStock) {
      this.spRecord.stock = totalStock;
    },
    onDcType(type) {
      this.dcType = type;
    },

    //计算多属性新产品的总库存
    _CalcTotalStock(list, start, len) {
      let zs = 0;
      if (start > list.length - 1 || start + len > list.length) {
        return zs;
      }
      for (var i = start; i < start + len; i++) {
        zs += list[i].Stock;
      }
      return zs;
    },

    //-----上传图片--------------------------
    //打开图片排序，删除对话框
    onPicUpdate() {
      let logoFileList = [];
      this.pictures.forEach(pic => {
        logoFileList.push(pic.maxpic); //350x350
      });
      this.$refs["sortpic"].Show(this.spRecord.id, logoFileList);
    },
    //上传图片
    onPicUpload() {
      this.$refs["dlgpicupload"].Show(this.spRecord.id);
    },
    //上传成功后的刷新
    onUploadSuccess() {
      this.$message.success("上传成功！");
      this.isSavePicture = true;
      this._GetShowPicList();
    },
    //排序及删除后的更新
    onLogoChange(logoList) {
      this._SetPics(logoList); //展示图片
    },
    //-------------------------------
    onHtmlChange(html) {
      this.html = html;
    },
    //商品图文介绍刷新
    onHtmlRefresh() {
      // this.$message("开发中...");
      getProductHtml({ sp_id: this.spRecord.id }).then(r => {
        if (r.code == 0) {
          this.html = r.data;
          this.$message.success("商品介绍刷新成功！");
        } else {
          this.$message.error("获取商品图文介绍出错！原因：" + r.msg);
        }
      });
    },
    //商品图文介绍保存
    onHtmlSave() {
      this.$confirm("此操作将属性参数设置内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this._SaveHtml();
        })
        .catch();
    },
    _SaveHtml() {
      let data = {
        sp_id: this.spRecord.id,
        html: this.html
      };
      saveProductHtml(data).then(r => {
        if (r.code == 0) {
          this.$message.success("保存成功！");
        } else {
          this.$message.error("保存失败！原因：" + r.msg);
        }
      });
    },

    //获取商品展示图片列表
    _GetShowPicList() {
      getProductShowPicList({ id: this.spRecord.id }).then(r => {
        if (r.code == 0) {
          this.httpHead = r.data.http_head; //网址头
          this._SetPics(r.data.logo_list); //展示图片
        } else {
          this.$message.error("获取商品展示图片列表出错！原因：" + r.msg);
        }
      });
    },

    //将每个展示图片形成三个地址,同时生成一个带图片ID的列表用于图片选择
    _SetPics(picList) {
      this._GetLogoList(); //获取商品图标列表
      this.pictures = [];
      let id = this.spRecord.id;
      let httph = this.httpHead + "/" + id.toString();
      picList.forEach(pic => {
        //{logo: "",pic: "",maxpic: ""}
        this.pictures.push({
          logo: httph + "/5/" + pic, //50
          pic: httph + "/2/" + pic, //850 - 这里直接上大图
          maxpic: httph + "/3/" + pic //350 - 没生效
        });
      });
    },

    //获取商品图标列表-用于图片选择组件
    _GetLogoList() {
      getProductLogoSelectList({ id: this.spRecord.id }).then(r => {
        if (r.code == 0) {
          this.picSelect = r.data;
        } else {
          this.$message.error("获取商品展示图片列表出错！原因：" + r.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.ovf {
  overflow: hidden;
}
.el-main {
  margin: 0 0 0 20px;
  padding: 0;
  overflow: hidden;
}
.bt {
  margin: 10px 0 10px 0;
  color: white;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  background: #2e4d86;
}
.title {
  height: 26px;
  border-bottom: 2px solid rgb(11, 11, 78);
  margin-top: 10px;
  margin-bottom: 5px;
  .basetxt,
  .edittxt {
    float: left;
    font-size: 16px;
    border: 1px solid rgb(11, 11, 78);
    color: white;
    background-color: rgb(11, 11, 78);
  }
  .edittxt {
    margin-top: 10px;
  }
  .basebtn {
    float: right;
    margin-top: -4px;
  }
}
.jswidth {
  width: 700px;
  margin: 0 auto;
}
</style>;